import type { ThemeType } from '../../../../../types/interfaces'
import { ThemeVarService } from '../../../../../lib/abstract/style/theme_var/service'

export interface IPageBarStylesConfig {
  container: string
  currentPage: string
  otherPage: string
  setHeight?: boolean
  noPadding?: boolean
  noBorder?: boolean
}

export class PageBaseStyles {
  private static instance: PageBaseStyles
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  /**
   * 获取单例实例
   */
  static getInstance(): PageBaseStyles {
    if (!PageBaseStyles.instance) {
      PageBaseStyles.instance = new PageBaseStyles()
    }
    return PageBaseStyles.instance
  }

  /**
   * 标题样式
   */
  titleStyles(options?: { includeTag?: boolean, tagName?: string }): string {
    const { includeTag = false, tagName = 'em' } = options || {}

    return `
      color: var(${this.themeVarService.message.warning.textPrimary}) !important;
      font-size: 18px !important;
      border: none !important;
      border-left: 2px solid var(${this.themeVarService.message.orange.textPrimary}) !important;
      padding-left: 4px !important;
      
      ${includeTag
        ? `${tagName} {
            color: var(${this.themeVarService.message.warning.textPrimary}) !important;
          }`
        : ''}
    `
  }

  /**
   * 列表项悬浮样式
   */
  listItemHoverStyles(options?: { width: string }): string {
    const { width = '48px' } = options || {}

    return `
    transition: all 0.3s ease !important;
    
    /* 悬浮效果 */
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      
      /* 悬浮指示线 */
      &::after {
        background: linear-gradient(
          90deg,
          var(${this.themeVarService.link.default.textHover}),
          var(${this.themeVarService.link.default.text})
        ) !important;
        opacity: 1 !important;
      }
    }
    
    /* 默认隐藏指示线 */
    &::after {
      content: '' !important;
      position: absolute !important;
      bottom: 0 !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: ${width} !important;
      height: 3px !important;
      background: transparent !important;
      border-radius: 2px !important;
      opacity: 0 !important;
      transition: opacity 0.3s ease !important;
    }
    `
  }

  /**
   * 图片样式
   */
  imgStyles(theme: ThemeType): string {
    return theme === 'dark'
      ? `
        filter: brightness(0.8) contrast(1.0) !important;
      `
      : ''
  }

  pageBarStyles(options: IPageBarStylesConfig): string {
    const { container, currentPage, otherPage, setHeight = true, noPadding = true, noBorder = true } = options

    return `
  /* 搜索分页 */  
  ${container} {
    ${currentPage}, ${otherPage} {
      text-align: center !important;
      font-size: ${this.themeVarService.pageBar.default.fontSize} !important;
      border-radius: ${this.themeVarService.pageBar.default.borderRadius} !important;
      ${setHeight
          ? `
          height: ${this.themeVarService.pageBar.default.height} !important;
          line-height: ${this.themeVarService.pageBar.default.height} !important;
          min-width: ${this.themeVarService.pageBar.default.height} !important;
        `
          : ''
      }
      ${noPadding
          ? `
          padding: 0 !important;
        `
          : ''
      }
      ${noBorder
          ? `
          border: none !important;
        `
          : ''
      }
    }

    /* 当前页 */
    ${currentPage} {
      background-color: var(${this.themeVarService.pageBar.currentPage.bg}) !important;
      color: var(${this.themeVarService.pageBar.currentPage.text}) !important;
      border-color: var(${this.themeVarService.pageBar.currentPage.bg}) !important;
    }
    
    /* 其他页 */
    ${otherPage} {
      background-color: var(${this.themeVarService.pageBar.otherPage.bg}) !important;
      color: var(${this.themeVarService.pageBar.otherPage.text}) !important;
      border-color: var(${this.themeVarService.pageBar.otherPage.bg}) !important;
      
      &:hover {
        background-color: var(${this.themeVarService.pageBar.otherPage.bgHover}) !important;
        color: var(${this.themeVarService.pageBar.otherPage.textHover}) !important;
        border-color: var(${this.themeVarService.pageBar.otherPage.bgHover}) !important;
      }
    }
  }
    `
  }
}
